<style>
  @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
  <select data-bind="options: exampleTypes, value: currentExampleType"></select>
  <table>
    <tbody>
      <tr>
        <td>Maximum Screen Space Error</td>
        <td>
          <input
            type="range"
            min="0.0"
            max="64.0"
            step="0.1"
            data-bind="value: maximumScreenSpaceError, valueUpdate: 'input'"
          />
          <input
            type="text"
            size="5"
            data-bind="value: maximumScreenSpaceError"
          />
        </td>
      </tr>
      <tr>
        <td><b>Attenuation</b></td>
      </tr>
      <tr>
        <td>Geometric Error Scale</td>
        <td>
          <input
            type="range"
            min="0.0"
            max="2.0"
            step="0.1"
            data-bind="value: geometricErrorScale, valueUpdate: 'input'"
          />
          <input type="text" size="5" data-bind="value: geometricErrorScale" />
        </td>
      </tr>
      <tr>
        <td>Maximum Attenuation</td>
        <td>
          <input
            type="range"
            min="0.0"
            max="32.0"
            step="1.0"
            data-bind="value: maximumAttenuation, valueUpdate: 'input'"
          />
          <input type="text" size="5" data-bind="value: maximumAttenuation" />
        </td>
      </tr>
      <tr>
        <td>Base Resolution</td>
        <td>
          <input
            type="range"
            min="0.0"
            max="10.0"
            step="0.01"
            data-bind="value: baseResolution, valueUpdate: 'input'"
          />
          <input type="text" size="5" data-bind="value: baseResolution" />
        </td>
      </tr>
      <tr>
        <td><b>Eye Dome Lighting</b></td>
      </tr>
      <tr>
        <td>Eye Dome Lighting Strength</td>
        <td>
          <input
            type="range"
            min="0.0"
            max="10.0"
            step="0.1"
            data-bind="value: eyeDomeLightingStrength, valueUpdate: 'input'"
          />
          <input
            type="text"
            size="5"
            data-bind="value: eyeDomeLightingStrength"
          />
        </td>
      </tr>
      <tr>
        <td>Eye Dome Lighting Radius</td>
        <td>
          <input
            type="range"
            min="0.0"
            max="10.0"
            step="0.1"
            data-bind="value: eyeDomeLightingRadius, valueUpdate: 'input'"
          />
          <input
            type="text"
            size="5"
            data-bind="value: eyeDomeLightingRadius"
          />
        </td>
      </tr>
    </tbody>
  </table>
</div>
